<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  	<head >
	    <title></title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="${request.contextPath}/js/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="${request.contextPath}/js/my97/WdatePicker.js"></script>
			
		<script type="text/javascript">
		$(document).ready(function() {
			
			// 把每个a中的内容包含到一个层（span.out）中，在span.out层后面追加背景图层（span.bg）
			$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );

			// 循环为菜单的a每个添加一个层（span.over）
			$("#menu li a").each(function() {
				$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			$("#menu li a").hover(function() {
				// 鼠标经过时候被触发的函数
				$(".out",this).stop().animate({'left':'220px'}, 250); // 向下滑动 - 隐藏
				$(".over",this).stop().animate({'left':'0px'}, 250); // 向下滑动 - 显示
				$(".bg",this).stop().animate({'left':'28px'}, 120); // 向下滑动 - 显示

			}, function() {
				// 鼠标移出时候被触发的函数
				$(".out",this).stop().animate({'left':'0px'},250); // 向上滑动 - 显示
				$(".over",this).stop().animate({'left':'-180px'},250); // 向上滑动 - 隐藏
				$(".bg",this).stop().animate({'left':'-180px'},120); // 向上滑动 - 隐藏
			});
			
			$('#logout').click(function(){
				$('#logoutForm').submit();
			});
		});
		

		</script>
		<style type="text/css">
		.menu { 
			height: 300px;;
			width: 120px;
			display: block;
		}
		.menu ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.menu ul li {
			float: left;
			/* 菜单子元素的内容超出不可见 */  
			overflow: hidden;		
			position: relative;
			text-align: center;
			line-height: 60px;
			border-radius:5px;
			margin-top:19px;
			background-color:#EAEAEA;
			background: -webkit-gradient(linear, left top, left bottom, 
		                             from(#F1F1F1), to(#E5E5E5), 
		                             color-stop(0.35, #EAEAEA), color-stop(0.55, #E0E0E0));
		}
		.menu ul li a {
			/* 必须是相对定位  */ 
			position: relative;
			display: block;
			width: 200px;
			height: 55px;
			font-family: Arial;
			font-size: 16px;
			font-weight: bold;
			letter-spacing: 1px;
			text-transform: uppercase;
			text-decoration: none;
			cursor: pointer;
		}
		.menu ul li a span {
			/* 所有层将使用绝对定位 */
			position: absolute;
			left: 0;
			width: 200px;
		}

		.menu ul li a span.out {
			top: 0px;
		}
		.menu ul li a span.over,
		.menu ul li a span.bg {
			/* 起初.over层和.bg层相对a元素-45px以达到隐藏 */  
			left: -180px;
		}
		/** 完整版示例 **/

		#menu ul li a {
			color: #000;
		}
		#menu ul li a span.over {
			color: #FFF;
		}
		#menu ul li span.bg { 
			height: 25px;
			width:150px;
			margin-top:17px;
			border-top-left-radius:1px;
			border-top-right-radius:22px;
			border-bottom-left-radius:1px;
			border-bottom-right-radius:22px;
			background-color:#3CA2EC;
		}
		</style>
  	</head>
  
  	<body>
		<div id="menu" class="menu">
			<ul>
				<li><a href="${request.contextPath}/manager/baseWord" target="mainFrame">总词库管理</a></li>
				<li><a href="${request.contextPath}/manager/sameWord" target="mainFrame">同义词库管理</a></li>
				<li><a href="${request.contextPath}/manager/industryWord" target="mainFrame">行业词库管理</a></li>
                <li><a href="${request.contextPath}/manager/testIndex" target="mainFrame">评测词库管理</a></li>
				<li><a href="${request.contextPath}/manager/hotWord" target="mainFrame">热门词库管理</a></li>
				<li><a href="${request.contextPath}/manager/tagIndex" target="mainFrame">产品标签管理</a></li>
				<li><a href="${request.contextPath}/manager/cateAttrIndex" target="mainFrame">商品分类属性管理</a></li>
				<li><a href="${request.contextPath}/manager/cateIndex" target="mainFrame">其它信息管理</a></li>
			</ul>
		</div>
		<div style="padding-top:10px;font-size:13px;">
			<br />
			<form id="logoutForm" action="../login/logout" method="post" target="_top">	
				<br /><div style="visibility:hidden;">sdfsd</div>
				<a style="" id="logout" href="javascript:void(0);" >退出系统</a>
			</form>
		</div>
  	</body>
</html>
